<!--
* description: 权益详情
* author: chenjingwen
* createdDate:2021-1-25
-->
<template>
  <section class="editAreaAudit">
    <el-dialog
      v-dialogDrag
      :visible="popupsVisible"
      width="50%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />

      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents0.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="true"
            :is-require="comp.isRequire"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :o-fields="comp.oFields"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">
        套餐信息

        <el-button class="btn" @click="useageRecord">使用记录</el-button>
      </div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents1.filter((o) => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds || ''"
            :code="formField[comp.codeField]"
            :disabled="true"
            :is-require="comp.isRequire"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :options="comp.options"
            :o-fields="comp.oFields"
            @changeCode="getComponentCode"
          />
        </el-row>
      </div>
      <div class="filter-container filter-title">维修项目</div>

      <one-table-template
        ref="multipleTable"
        :dynamic-table-cols="tableCols"
        :dynamic-api-config="apiConfig"
        :dynamic-form-fields="formField"
        :dynamic-is-show-select="false"
        :dynamic-is-show-more-btn="true"
        :dynamic-table-defult-height="300"
        :isShowPagination="false"
      />
      <div class="filter-container filter-title">维修项目</div>

      <one-table-template
        ref="multipleTable"
        :dynamic-table-cols="tableCols"
        :dynamic-api-config="apiConfig"
        :dynamic-form-fields="formField"
        :dynamic-is-show-select="false"
        :dynamic-is-show-more-btn="true"
        :dynamic-table-defult-height="300"
        :isShowPagination="false"
      />
      <Edit
        :key="editPopupsKey"
        :popups-visible="editPopupsVisible"
        :data-for-form="editRowData"
        :popups-state="editPopupsState"
        @close="close"
        @save="save"
      />
    </el-dialog>
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import { formMixins } from "@/components/mixins/formMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import api from "@/api/subsidyManage";
import Edit from "./usageRecord";

export default {
  components: {
    OneTableTemplate,
    // inEdit,
    Edit,
    dialogHeader: () => import("@/components/dialogHeader"),
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],
  props: {
    dataForForm: {
      type: Object,
      default: () => {},
    },
   
  },

  data() {
    const viewPageCode = "areaAudit-edit";

    return {
      titleName: "权益详情",
        editRowData: {},
      editPopupsState: "",
      editPopupsVisible: false,
      apiConfig: api.queryLog,
      // 动态组件-按钮

      // 动态组件-查询条件

      tableComponents0:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
              .tableComponents
          : [
              {
                compKey: "compKey6",
                labelName: "车牌号",
                codeField: "invoiceNo",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",

                isMust: true,
              },
              {
                compKey: "compKey7",
                labelName: "VIN码",
                codeField: "invoiceDate",
                component: () => import("@/components/org/commonInput"),
                type: "datePicker",

                isMust: true,
              },
              {
                compKey: "compKey8",
                labelName: "车主姓名",
                codeField: "vin",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
              },
            ],

      tableComponents1:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
              .tableComponents
          : [
              {
                compKey: "compKey1",
                labelName: "订单编号:",
                codeField: "qualifiedCertNo",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                span: 8,
              },
              {
                compKey: "compKey2",
                labelName: "类别:",
                codeField: "produceDate",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                span: 8,
              },
              {
                compKey: "compKey3",
                labelName: "套餐/精品编码:",
                codeField: "carConfigCn",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                span: 8,
                isMust: true,
              },
              {
                compKey: "compKey4",
                labelName: "套餐/精品名称:",
                codeField: "licenseLocationProvince",
                component: () => import("@/components/org/commonInput"),
                type: "dropdownList",
                span: 8,
                isMust: true,
              },
              {
                compKey: "compKey5",
                labelName: "购买日期:",
                codeField: "licenseLocationCity",
                component: () => import("@/components/org/commonInput"),
                type: "dropdownList",
                span: 8,
                isMust: true,
              },
              {
                compKey: "compKey6",
                labelName: "有效期:",
                codeField: "licenseLocationCity",
                component: () => import("@/components/org/commonInput"),
                type: "dropdownList",
                span: 8,
                isMust: true,
              },
              {
                compKey: "compKey7",
                labelName: "使用次数：",
                codeField: "licenseLocationCity",
                component: () => import("@/components/org/commonInput"),
                type: "dropdownList",
                span: 8,
                isMust: true,
              },
              {
                compKey: "compKey8",
                labelName: "剩余次数：",
                codeField: "licenseLocationCity",
                component: () => import("@/components/org/commonInput"),
                type: "dropdownList",
                span: 8,
                isMust: true,
              },
              {
                compKey: "compKey8",
                labelName: "选装包：",
                codeField: "licenseLocationCity",
                component: () =>
                  import("@/components/org/commonInput/textareaInput"),
                type: "dropdownList",
                span: 24,
                isMust: true,
              },
            ],
      tableCols: [
        {
          prop: "carSeriesCn",
          label: "工时编码",
          align: "center",
        },
        {
          prop: "carConfigCn",
          label: "维修内容",
          align: "center",
        },
        {
          prop: "optionalPagName",
          label: "工时数",
          align: "center",
        },
        {
          prop: "carColorName",
          label: "备注",
          align: "center",
        },
      ],
      tableCols1: [
        {
          prop: "carSeriesCn",
          label: "备件编码",
          align: "center",
        },
        {
          prop: "carConfigCn",
          label: "备件名称",
          align: "center",
        },
        {
          prop: "optionalPagName",
          label: "数量",
          align: "center",
        },
        {
          prop: "carColorName",
          label: "备注",
          align: "center",
        },
      ],
      // 标题
      textMap: {
        edit: "区域审核",
      },

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {},
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
    };
  },
  created() {
    this.formField = this.dataForForm;
  },
  methods: {
    // 关闭弹窗
    closeEdit() {
      this.$emit("update:popupsVisible", (this.popupsVisible = false));
    },

   useageRecord(){

this.editPopupsVisible =true

   }
  },
};
</script>

<style lang="scss" scoped>
.filter-title {
  font-size: 18px;
  font-weight: bolder;
  position: relative;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
.prompt {
  color: #e70020;
  font-size: 13px;
  height: 15px;
  line-height: 15px;
}
/deep/.el-dialog__body {
  margin-top: 30px;
  height: 500px;
}
/deep/.filter-params .el-col {
  margin-bottom: 15px;
}

.btn {
  z-index: 999999;
  position: absolute;
  top: 0;
  right: 2.5%;
}
</style>
